<template>
  <div>
    <el-table
        ref="multipleTable"
        tooltip-effect="dark"
        style="width: 100%"
        :data="list"
        v-bind="$attrs"
        v-on="$listeners"
    >
      <!--多选-->
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <!--序号-->
      <el-table-column
          type="index"
          :index="calIndex"
      >
      </el-table-column>
      <!--插槽处理-->
      <template v-for="(column,key) in tableObj.columns">
        <el-table-column
            :key="key"
            :prop="column.prop"
            :label="column.label"
            :width="column.width"
            v-if="column.type == 'slot'"
        >
          <template slot-scope="scope">
            <slot :name="column.slot_name" :row="scope.row"></slot>
          </template>
        </el-table-column>
        <el-table-column
            :prop="column.prop"
            :label="column.label"
            :width="column.width"
            v-else-if="!column.hide"
        >
        </el-table-column>
      </template>
    </el-table>
    <div>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="tableObj.pageNum"
          :page-sizes="tableObj.pageSizes"
          :page-size="tableObj.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableObj.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getNodeMyTableList } from "@/utils/api.js" 
export default {
  name: "H3yunTableCompV1",
  data() {
    return {
      // 表格对象   -- 1
      tableObj: {
        http: {
          url: undefined,
          params: {},
          result: {
            list: undefined,
            total: undefined
          }
        },
        pageSizes: [10, 20, 50, 100],
        pageNum: 1,
        pageSize: 10,
        total: 0,
        columns: []
      },
      tableData: [],
    }
  },
  // 接收父组件传递过来的值
  props: {
    // 接收父组件传递过来的table的配置数据，类型为Object   -- 2
    data: Object,
    list: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    // 监控父组件中的data，保证子组件中的tableObj与父组件一致   -- 3
    data: {
      deep: true, // 深度监控
      immediate: true, // 在组件创建时立即触发
      handler(newVal, oldVal) {
        console.log('watch');
        this.init(newVal) // 初始化
      }
    }
  },
  // 挂载之前加载数据
  beforeMount() {
    // this.init()
  },
  methods: {
    // 计算序号
    calIndex(index) {
      return (this.tableObj.pageNum - 1) * (this.tableObj.pageSize) + index + 1
    },
    // 加载后端数据
    load() {
      // 使用node写接口, 可以在Network中看到
      getNodeMyTableList({
        pageSize: this.tableObj.pageSize, // 一页多少条
        pageNum: this.tableObj.pageNum, // 第几页
        ...this.tableObj.http.params
      })
      .then(res => {
        this.tableData = res.data.list
        this.tableObj.total = res.data.total
      })
    },
    // 更改每页数量
    handleSizeChange(val) {
      this.tableObj.pageSize = val
      const pageParams = {
          pageSize: val,
          pageNum: this.tableObj.pageNum,
        }
      this.$emit('changePage', pageParams)
    },
    // 页码切换
    handleCurrentChange(val) {
      this.tableObj.pageNum = val
      const pageParams = {
          pageSize: this.tableObj.pageSize,
          pageNum: val,
        }
      this.$emit('changePage', pageParams)
    },
    // 初始化方法
    init(newVal) {
      for (const key in newVal) {
        // 如果父组件传的值能与tableObj的属性匹配，比如父子组件都有tableObj.columns，则会进入这个if
        if (Object.keys(this.tableObj).includes(key)) {
          // 比如：tableObj.columns = newVal.columns
          this.tableObj[key] = newVal[key]
        }
      }
    }
  }
}
</script>

<style scoped>

</style>